import React, { useRef, useState } from 'react';
import { connect, history } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import SendExpress from './components/Form';
import Detail from './components/details';
import Indentation from '@/components/Indentation';
import { ExpressStatus } from '@/common/contact'
import { notification } from 'antd'
import city from '@/common/city';
const PlanList = (props) => {
  const { loading, dispatch, list } = props;
  const childRef = useRef();
  const [visible, setVisible] = useState(false);
  const [visible1, setVisible1] = useState(false);
  // 搜索参数
  const { location } = history;
  const { query } = location;
  const { accessId } = query
  const searchItems = [
    {
      label: '收件人',
      name: 'receiveUser',
    },
    {
      label: '下单时间',
      name: 'orderStartTime',
      end: 'orderEndTime',
      type: 'rangePicker',
      // picker: "month",
    },
    {
      label: '订单编号',
      name: 'orderSn',

    },
    {
      label: '快递状态',
      name: 'expressStatus',
      type: 'select',
      fieldNames: { label: 'label', value: 'value' },
      select: [
        { label: '待发货', value: '-1' },
        { label: '快递收件', value: '0' },
        { label: '在途中', value: '1' },
        { label: '正在派件', value: '2' },
        { label: '已签收', value: '3' },
        { label: '派送失败', value: '4' },
        { label: '疑难件', value: '5' },
        { label: '退件签收', value: '6' }
      ]

    },
    {
      label: '省份代码',
      name: 'provinceCode',
      type: 'select',
      select: city,
      fieldNames: { label: 'label', value: 'value' },
    },
  ]
  // table 表头
  const getColumns = [
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '商品信息',
      dataIndex: 'expressDesc',
      render: (e) => {
        const goods = JSON.parse(e)
        const { goodsName, propertyDesc } = goods
        return <div>
          <div>{goodsName}</div>
          {propertyDesc && <div style={{ marginTop: 12 }}>{propertyDesc}</div>}
        </div>
      }
    },
    {
      title: '用户姓名',
      dataIndex: 'username',
    },
    {
      title: '用户手机',
      dataIndex: 'userMobile',
    },

    {
      title: '收件人姓名',
      dataIndex: 'receiveUsername',
    },
    {
      title: '收件人手机',
      dataIndex: 'receiveMobile',
    },
    {
      title: '地址',
      dataIndex: 'address',
      render: (e, record) => {
        const { provinceName, cityName, districtName, } = record
        return <Indentation str={provinceName + cityName + districtName + e}></Indentation>
      }
    },
    {
      title: '实收金额',
      dataIndex: 'payFee',
    },
    {
      title: '发货商品数量',
      dataIndex: 'goodsAmount',
    },
    {
      title: '快递公司',
      dataIndex: 'expressCompany',
    },
    {
      title: '快递单号 ',
      dataIndex: 'expressNo',
    },
    {
      title: '发货状态 ',
      dataIndex: 'expressStatus',
      render: (e) => {
        return ExpressStatus[e]
      }
    },
    {
      title: '发货人 ',
      dataIndex: 'expressAdminName',
    },
    {
      title: '发货时间',
      dataIndex: 'expressTime',
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '发货',
          visible: record.expressStatus === '-1',
          click: () => {
            setVisible({
              show: true, detail: record
            })
          },
        },
        {
          title: '查看物流',
          visible: record.expressStatus !== '-1',
          click: () => {
            const { expressRecord } = record
            if (!expressRecord) {
              return notification.warning({
                message: '温馨提示',
                description: '暂无物流信息',
              });
            }
            setVisible1({
              show: true, detail: record
            })
          },
        },
        {
          title: '查看详情',
          click: () => {
            history.push({
              pathname: '/order/orderDetails',
              query: {
                orderSn: record.fromIdentification,
                accessId,
                linkType: 'user'
              }
            })
          },
        },
      ],
    },
  ];
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const handleSaveRole = (detail = {}) => {
    setVisible(() => {
      return {
        show: true,
        detail,
      };
    });
  };
  return (
    <>
      <TableDataBlock
        cRef={childRef}
        loading={loading}
        searchItems={searchItems}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="expressTemplate/fetchListExpress"
        {...list}
      ></TableDataBlock>
      <SendExpress
        childRef={childRef}
        visible={visible}
        onClose={() => setVisible(false)}
        handleCallback={handleCallback}
      ></SendExpress>
      <Detail
        visible={visible1}
        onClose={() => setVisible1(false)}
        handleCallback={handleCallback}
      ></Detail>
    </>
  );
};

export default connect(({ expressTemplate, loading }) => ({
  list: expressTemplate.organizationExpressList,
  loading: loading.models.expressTemplate,
}))(PlanList);
